<template>
  <div class="app-container">
    <main-header @changeDevice="changeDevice" />
    <div class="h12" />
    <list :list-obj="listObj" @deleteOne="deleteOne" @cancelOne="cancelOne" @getOne="getOne" />
    <detail ref="detail" />
    <el-dialog
      title="新增计划"
      :visible.sync="dialogVisible"
      width="800px"
      append-to-body
      :close="handleClose"
    >
      <main-form :form-data="formData" @submit="submit" />
    </el-dialog>
    <div class="fix-btns">
      <el-tooltip content="新增计划" placement="top">
        <el-button type="primary" icon="el-icon-plus" @click="add">新增计划</el-button>
      </el-tooltip>
      <el-tooltip content="刷新计划" placement="top">
        <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新计划</el-button>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import MainHeader from './components/header'
import MainForm from './components/main-form'
import Detail from './components/detail'
import List from './components/list'
import { getAll, cancelOne, deleteOne } from '@/api/plan'
import { addOne } from '@/api/pgPlan'
import CommonMixin from '@/mixin/CommonMixin'
export default {
  components: {
    MainHeader,
    MainForm,
    List,
    Detail
  },
  mixins: [CommonMixin],
  props:{
    showHeader:{
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      formData: {}
    }
  },
  methods: {
    changeDevice(serialno) {
      if (serialno) {
        this.listQuery.serialno = serialno
        this.getList()
      } else {
        this.listObj = []
      }
    },
    handleClose() {
      this.dialogVisible = false
      this.formData = {}
    },
    async getList() {
      if (this.listQuery.serialno) {
        const listObj = await getAll(this.listQuery.serialno)
        this.listObj = listObj
      }
    },
    addOne(formData) {
      addOne(formData).then(res => {
        if (res.errorCode === 0) {
          this.$message.success(res.msg)
          this.getList()
          this.dialogVisible = false
          this.formData = { delay: 1 }
        }
      })
    },
    deleteOne(row) {
      deleteOne(row.id).then(res => {
        if (res.errorCode === 0) {
          this.$message({ message: res.msg, type: 'success', showClose: true })
          this.getList()
        }
      })
    },
    cancelOne(row) {
      cancelOne(row.id).then(res => {
        if (res.errorCode === 0) {
          this.$message({ message: res.msg, type: 'success', showClose: true })
          this._afterSubmit()
        }
      })
    },
    getOne(row) {
      this.$refs.detail.show(row)
    },
    add() {
      this.formData.delay = 1
      this.dialogVisible = true
    },
    refresh() {
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.fix-btns{
  display:inline-block;
  position:fixed;
  width:100%;
  bottom:12px;
  .el-button{
    width:223px;
  }
}
</style>
